<!DOCTYPE>
<html>
<head>
    <title>Q.table | Q.js</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <!-- 使用QLib控件是必须包含样式表 -->
  <link type="text/css" rel="stylesheet" href="../ui.css" />
  <!--  
  提示：src="{QLib目录}/Q.js" 
  根据实际存放路径， 测试代码都是在QLib目录的samples文件夹下，所以这里用的是"../Q.js" 
  -->
    <script type="text/javascript" src="../Q.js">
  <!--
  // 需要加载额外库时
  import utils.stl;
  import utils.xml;
  import ui.contextmenu;
  import ui.table;
  -->
  </script>

  <script>
  <!--
  var g_table = null;
  Q.Ready(function() {
    var columns = [
    { name: 'url', title: '地址', align:'left', width: 540, isHTML: true, renderer : function(record) {return record['url'];}, },
    { name: 'date', title: '日期', align:'left', width: 140, isHTML: true, renderer : function(record) {return record['date'];}, }
    ];
    
    var store = new Q.store({
      datasource: [
        {url: 'abc', date: '2014-12-11'},
        {url: 'abc', date: '2014-12-11'},
        {url: 'abc', date: '2014-12-11'},
        {url: 'abc', date: '2014-12-11'},
        {url: 'abc', date: '2014-12-11'},
        {url: 'abc', date: '2014-12-11'},
        {url: 'abc', date: '2014-12-11'},
        {url: 'abc', date: '2014-12-11'},
        {url: 'abc', date: '2014-12-11'},
        {url: 'abc', date: '2014-12-11'},
        {url: 'abc', date: '2014-12-11'},
        {url: 'abc', date: '2014-12-11'},
        {url: 'abc', date: '2014-12-11'},
        {url: 'abc', date: '2014-12-11'},
        {url: 'abc', date: '2014-12-11'},
        {url: 'abc', date: '2014-12-11'},
        {url: 'abc', date: '2014-12-11'},
        {url: 'abc', date: '2014-12-11'},
        {url: 'abc', date: '2014-12-11'}
      ] 
    });
    //init Q.table
    g_table = new Q.table({ 
      title: "Q.table标题栏",
      wstyle: "q-attr-border q-attr-toolbar q-attr-title",
      container: Q.$('table_container'),
      columns: columns,  
      store: store,
      row_onclick : function(row) {
        var url = this.get_text(row, "url");
      },
      row_onmouseover: function(row) {
        //row.style.backgroundColor = "#F1F1F1"; 
      },
      row_onmouseout: function(row) {
        //row.style.backgroundColor = "transparent"; 
      }      
    });
  });
  -->
  </script>
</head>
<body onselectstart="return false;" style="height: auto;overflow:hidden;-moz-user-select:none;-webkit-user-select: none;">

<p>Q.table示例</p>
<hr>
<br>

<div id="table_container" style="width: 800px; height: 400px; position:relative;background-color:#99bbe8;">

</div>

</body>
</html>
